import React, {Component} from 'react';
import {Link,NavLink,Route} from 'react-router-dom'
import './goods.css'
import Info from "./info.jsx";

class Goods extends Component {
    state = {
        list: [
            {id: 1, name: '女装'},
            {id: 2, name: '男装'},
            {id: 3, name: '手机'}
        ]
    }

    componentDidMount() {
        // console.log(useLocation())
    }

    render() {
        return (
            <div className={"goods-body"}>
                <div>产品页面</div>
                <div className={'show-goods'}>
                    <div className={"goods-nav"}>
                        {this.state.list.map(n=>(<NavLink key={n.id} path={"/goods/info/"+n.id} to={`/goods/info/${n.id}`}>{n.name}</NavLink>))}
                    </div>
                    <div className={"goods-info"}>
                        <Route path={"/goods/info/:id"} component={Info} />
                    </div>
                </div>

            </div>
        );
    }
}

// function Goods(props) {
//     const {id} = useParams()
//     return (
//         <div>{id}</div>
//     );
// }


export default Goods;